//在Echarts.vue文件中
<template>
  <div id="map"></div>
</template>

<script>
import 'echarts/extension/bmap/bmap.js'
import * as echarts from 'echarts'
import data from './china.json'
export default {
  name: 'MyEcharts',
  data() {
    return {
      data: '',
      datalist: []
    }
  },
  props: ['citylist'],
  watch: {
    citylist: function (newVal, oldVal) {
      this.datalist = newVal
      this.myEcharts()
    }
  },
  methods: {
    myEcharts() {
      const myChart = echarts.init(document.getElementById('map'))
      // 配置图表
      const data = this.data
      const geoCoordMap = {
        甘肃: [104.35851932200904, 35.40123159456249],
        青海: [98.77753991113792, 36.53004669909589],
        广西: [107.99655439706783, 23.735673935703687],
        贵州: [106.25837527859625, 26.505908922458815],
        重庆: [106.59396202962392, 29.737597968171656],
        北京: [116.35679568867022, 40.25702627244448],
        福建: [117.7802840500002, 26.617417710000097],
        安徽: [116.62978356256133, 32.13288035704295],
        广东: [112.38982181100027, 23.09589264500019],
        西藏: [91.67781334810746, 29.081958115774455],
        新疆: [86.36633990098284, 42.722922619141826],
        海南: [109.68506920700003, 19.15330638200004],
        宁夏: [106.65764611237813, 37.85293528913229],
        陕西: [108.11004520082531, 33.38519318281914],
        山西: [111.72104861939818, 36.35586904611952],
        湖北: [111.37402265791923, 31.417539985382007],
        湖南: [110.902381220417, 28.066339830418826],
        四川: [103.4985530948494, 30.67739736629541],
        云南: [100.29696333219198, 25.721744899807277],
        河北: [115.64873628100008, 38.04465116700004],
        河南: [113.46032230023388, 34.15787079530108],
        辽宁: [123.35254967500032, 40.48240794500012],
        山东: [118.28029535679576, 36.076608741968954],
        天津: [117.6595633141148, 39.21855181203543],
        江西: [115.17473025869447, 27.407869370774904],
        江苏: [120.34094130672383, 32.49093327643905],
        上海: [121.64094130672383, 31.02093327643905],
        浙江: [120.28535242000021, 29.10194563100012],
        吉林: [126.25284846284336, 43.46916859112878],
        内蒙古: [108.41327478505161, 40.317334824121446],
        黑龙江: [131.25284846284336, 46.46916859112878],
        香港: [114.0517684250002, 22.32851797100014],
        澳门: [111.9586043630003, 21.8]
      }
      const datalist = this.datalist
      const convertData = function (datalist) {
        const res = []
        for (let i = 0; i < datalist.length; i++) {
          const geoCoord = geoCoordMap[datalist[i].name]
          if (geoCoord) {
            res.push({
              name: datalist[i].name,
              // 拼接数组
              value: geoCoord.concat(datalist[i].value)
            })
          }
        }
        return res
      }
      echarts.registerMap('china', data)
      const optiondata = {
        tooltip: {
          // backgroundColor: 'rgba(0,0,0,0.5)',
          trigger: 'item'
          // backgroundColor: 'rgba(0,0,0,0.5)',
          // color: '#fff'
        },
        visualMap: {
          // 视觉映射组件
          min: 0,
          max: 500,
          show: false, // 是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在。
          splitNumber: 5,
          inRange: {
            color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
          },
          textStyle: {
            color: '#fff'
          }
        },
        geo: {
          // 地图组件
          map: 'china',
          label: {
            normal: {
              show: false,
              color: '#0076ff'
            },
            emphasis: {
              show: false,
              color: 'red'
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#40458e',
              borderColor: '#6367ad',
              borderWidth: 1.5
            },
            emphasis: {
              areaColor: '#40458e'
            }
          },
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
        },
        series: [
          {
            name: '车源量',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(datalist),
            symbolSize: function (val) {
              if (val[2] < 100) {
                return 10
              }
              return val[2] / 10
            },
            encode: {
              value: 2
            },
            label: {
              formatter: '{b}  : {@[2]}',
              position: 'top',
              show: false
            },
            emphasis: {
              label: {
                show: false
              }
            }
          }
        ]
      }
      myChart.setOption(optiondata)
    }
  },
  mounted() {
    this.data = data
  }
}
</script>

<style lang="less">
#map {
  height: 100%;
  width: 100%;
  background-color: transparent;
}
</style>
